<template>
  <div>
    <div v-if="detail.prizeOrderStatus === 0">
      <div class="tableCenter">待发货</div>
      <el-button type="primary" size="mini" class="bottom" @click="deliverGood"
        >发货</el-button
      >
      <el-dialog
        :visible.sync="sendVisible"
        width="650px"
        :before-close="closeHandle"
      >
        <span slot="title" class="diaTitle">商品发货</span>
        <SendDeal
          :detail="detail"
          :visible="sendVisible"
          ref="sendDeal"
        ></SendDeal>
        <span slot="footer" class="diaFooter">
          <el-button @click="closeHandle" size="medium">取消</el-button>
          <el-button type="primary" @click="sendIntegral" size="medium"
            >确认</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div v-if="detail.prizeOrderStatus === 1">
      <div class="tableCenter">卖家已发货</div>
      <el-button
        type="primary"
        size="mini"
        class="bottom"
        @click="showDeliverMsg"
        >查看物流</el-button
      >
      <el-dialog :visible.sync="logVisible" width="30%">
        <Delivery :detail="nextDetail" ref="sendDeal"></Delivery>
      </el-dialog>
    </div>
    <span v-if="detail.prizeOrderStatus === 2">交易成功</span>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Ref } from "vue-property-decorator";
import SendDeal from "./dialog/SendDeal.vue";
import Delivery from "./dialog/Delivery.vue";
import { sendintegralGoodByPrint } from "@/api/integral/integral";

@Component({
  components: {
    SendDeal,
    Delivery,
  },
})
export default class DeliveryCom extends Vue {
  @Prop({
    type: Object,
    default() {
      return {};
    },
  })
  detail: any;

  @Ref()
  readonly sendDeal: HTMLFormElement;

  /** 发货弹窗 */
  sendVisible = false;

  /** 物流进度 */
  logVisible = false;

  nextDetail = {} as any;

  /**
   * 单个发货
   */
  deliverGood() {
    this.sendVisible = true;
  }

  closeHandle() {
    this.sendVisible = false;
    this.sendDeal.form = {
      deliverCode: "",
      expressId: "",
      orderIds: [],
      printCode: "",
      shopId: "",
    };
  }

  /**
   * 确认发货
   */
  sendIntegral() {
    if (
      !this.sendDeal.form.deliverCode ||
      !this.sendDeal.form.printCode ||
      !this.sendDeal.form.expressId
    ) {
      this.$message.error("请填写物流信息");
      return;
    }
    this.sendDeal.form.isIntegralOrder = -1;
    this.sendDeal.form.orderIds.push(this.detail.prizeOrderId);
    const logisticsPrintDeliverDto = this.sendDeal.form;
    sendintegralGoodByPrint(logisticsPrintDeliverDto)
      .then(() => {
        this.$message.success("发货成功");
        this.sendVisible = false;
        this.$parent.$parent.$parent.$parent.$parent.$parent.getProOrder();
      })
      .catch(err => {
        this.$message.error(err || "网络错误");
      });
  }

  /**
   * 查看物流信息
   */
  showDeliverMsg() {
    this.nextDetail = JSON.parse(JSON.stringify(this.detail));
    this.logVisible = true;
  }
}
</script>

<style lang="scss" scoped>
.diaTitle {
  font-weight: bold;
  font-size: 18px;
}

.diaFooter {
  margin-right: 40px;
}

.bottom {
  margin-top: 5px;
}

.tableCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
